<template>
  <div class="search-store">
    <div class="mescroll"  ref="mescroll">
      <div class="top">
        <x-address :title="title" v-model="value" @on-hide="logHide" :hide-district="true" value-text-align="right" @on-shadow-change="onShadowChange" :list="ChinaAddressV4Data"></x-address>
        <img class="img" src="@/assets/sousuomendian01.png" />
        <div class="div-input">
          <img src="@/assets/sousuomendian02.png" alt="">
          <input v-model="input_con" type="text" placeholder="输入门店名称搜索">
        </div>
        <span class="search-btn" @click="search_btn">搜索</span>
      </div>
      <div class="list border-top" v-show="storeList && storeList.length>0">
        <div class="item" v-for="(item, index) in storeList" :key="index" @click="router({path: './storeDetails',query:{id:item.id}})">
          <span class="img"><img class="item-img" :src="item.img" alt=""></span>
          <div class="cons">
            <p class="title">{{item.title}}</p>
            <p class="address">
              <span class="address-name">{{item.address}}</span>
              <span class="address-num" v-show="item.juli != '0'">{{item.juli}}</span>
            </p>
            <p class="tip">
              <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
              <span class="tip-con">{{item.brief}}</span>
            </p>
          </div>
          <i class="icon" v-show="item.banka">已办卡</i>
        </div>
      </div>
      <div class="border-top none" v-show="storeList.length<0">
        <img src="@/assets/goumaidekecheng01.png" class="result-none" alt="">
        <p>暂无相关结果</p>
        {{result}}
      </div>
    </div>
  </div>
</template>

<script>

import { XAddress, ChinaAddressV4Data } from 'vux'
import { storeSearchLocation, storeSearch } from "@/api/api"
import { wxlocation } from "@/config/wxLocation.js"
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
  export default {
    components: {
      XAddress,
      ChinaAddressV4Data,
    },
    data () {
      return {
        ChinaAddressV4Data: ChinaAddressV4Data,
        title: '省/市',
        count: 0,
        listLength: 0,
        code: "",
        level: '',
        input_con: "",
        result: "",
        latitude: "",
        longitude: "",
        value: [],
        storeList: [],
      }
    },
    created () {
      this.store_search_location()
    },
    //实例化上拉加载
    mounted () {
    },
    methods: {
      onShadowChange (ids, names) {
        this.count++
        if(this.count <= 1){
          return
        }
        this.title = names[1]
      },
      logHide() {
        switch(this.value[0]){
          case "110000": 
            this.code = "110000";
            this.level = '1';
            break;
          case "120000": 
            this.code = "120000";
            this.level = '1';
            break;
          case "310000": 
            this.code = "310000";
            this.level = '1';
            break;
          case "500000": 
            this.code = "500000";
            this.level = '1';
            break;
          default:
            this.code = this.value[1];
            this.level = '2';
            break;
        }
        this.mescroll.resetUpScroll();
      },
      store_search_location() {
        storeSearchLocation().then((res) => {
          wxlocation(res.data.data, (resSucc) => {
            this.latitude = resSucc.latitude;
            this.longitude = resSucc.longitude;
            this.mescroll = new MeScroll(this.$refs.mescroll, { 
              up: {
                callback: this.upCallback
              }
            })
          }, (resErr) => {
            console.dir(resErr)
          })
        }).catch((err) => {
          console.dir(err)
        })
      },
      upCallback(page) {
        var dataJson = {
          code: this.code,
          level: this.level,
          kw: this.input_con,
          lat: this.latitude,
          lon: this.longitude,
          p: page.num,
          num: page.size
        }
        storeSearch(dataJson).then((res) => {
        console.log(res)
          if (page.num == 1){
            this.storeList = []
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.data.list);
          })
          this.storeList = this.storeList.concat(res.data.data.list)
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      },
      search_btn() {
        this.mescroll.resetUpScroll();        
      }
    }
  }
</script>

<style lang="stylus" scoped>
.search-store
  background-color #fff
  .mescroll
    position fixed
    top 0
    bottom 0
    overflow hidden
    overflow-y auto
    .top
      position sticky
      height 5rem
      left 0
      top 0
      background-color #fff
      box-shadow 0px 0px 3px rgba(0,0,0,.2)
      .img
        position absolute
        top 2.4rem
        width .7rem
        left 7.3rem
      .div-input
        background-color #f5f5f5
        height 3.5rem
        width calc(100vw - 15rem)
        position absolute
        right 5.6rem
        border-radius 100px
        top 1rem
        img
          width 1.6rem
          position absolute
          z-index 9
          top 1rem
          left 1.2rem
        input
          width 100%
          padding-left 3.8rem
          position absolute
          left 0
          line-height 3.5rem
          height 3.5rem
          top 0
          background-color #f5f5f5
          border-radius 100px
          box-sizing border-box
          outline none
          border none
          font-size 1.4rem
      .search-btn
        font-size 1.4rem
        line-height 3.5rem
        position absolute
        right 0
        width 6rem
        text-align center
        top 1rem
    .list
      padding 0 2rem
      background-color #fff
      .item
        padding 1.5rem 0
        display flex
        border-bottom 1px solid #e6e6e6
        position relative
        &:last-child
          border-bottom none
        .img
          width 12.2rem
          height 9.2rem
          margin-right 1rem
          display flex
          img
            object-fit cover
        .cons
          flex 1
          .title
            color #333333
            font-size 1.7rem
            font-weight bold
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            width calc(100vw - 17.2rem)
          .address
            font-size 1.2rem
            color #999
            overflow hidden
            margin 1.3rem 0
            .address-name
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
              float left
              width calc(100vw - 24.2rem)
            .address-num
              float right
              text-align right
          .tip
            overflow hidden
            .tip-img
              width 1.6rem
              height 1.6rem
              float left
            .tip-con
              float left
              margin-left .5rem
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
              width calc(100vw - 21.2rem)
              color #172F6D
        .icon
          position absolute
          width 5rem
          height 2.2rem
          background linear-gradient(0deg,rgba(180,48,20,1) 0%,rgba(210,56,24,1) 100%)
          font-size 1.2rem
          color #fff
          text-align center
          line-height 2.2rem
    .border-top
      border-top 1rem solid #f5f5f5
    .none
      position relative
      background-color #fff
      min-height calc(100vh - 6rem)
      .result-none
        position absolute
        width 7.25rem
        top 12.6rem
        left 50%
        margin-left -3.6rem
      p
        font-size 1.3rem
        color #666
        position absolute
        width 100%
        text-align center
        top 25.2rem
</style>
